import React from 'react'
// 定义路由规则组件

// 引入路由对应的组件
import Home from '../router6-view/Home'
import Category from '../router6-view/Category'
import Cart from '../router6-view/Cart'
import Mine from '../router6-view/Mine'
import Notfind from '../router6-view/Notfind'

import { Routes, Route, Navigate } from 'react-router-dom'
type Props = {}
// react-router-dom@6 变化
// 01:去掉 Switch 使用 Routes 作用不变
// 02: component属性替换为 element ={组件标签}
// 03: 使用 Navigate做重定向, 去掉了 Redirect组件
// Navigate组件的作用就是当页面显示该组件的时候, 就会立刻执行该组件的to属性,跳转到对应页面
// 04: 404 组件配置变化了 有path 且值为 '*'
// 05: path 大小写可以通用 ,如果设置 caseSensitive 属性, 表示严格匹配, 不能大小写

export default function Index({ }: Props) {
    return (
        <Routes>
            <Route path='/home' element={<Home></Home>}></Route>
            <Route path='/category' element={<Category></Category>}></Route>
            <Route path='/cart' caseSensitive element={<Cart></Cart>}></Route>
            {/* 如果该一级路由有二级路由, 需要给一级路由path后设置 '/*' */}
            <Route path='/mine/*' element={<Mine></Mine>}></Route>
            {/* 重定向 */}
            <Route path='/' element={<Navigate to='/home'></Navigate>}></Route>
            {/* 404组件 */}
            <Route path='*' element={<Notfind></Notfind>}></Route>
        </Routes>
    )
}